 
	<style type="text/css">
		.container-box{
			height: 100vh;
		}
		.layui-headerbox{
			position: relative;
			height: 10%;
			background-color: #666;
		}
		.leftbox,.rightbox{
			float: left;
			width: 50%;
			height: 90%;
		}
		.leftbox{
			background-color: #888;
		}
		.rightbox{
			background-color: #999;
		}
	</style>



<!-- layui / 导航栏布局 start-->
	<div class="container-box">
		<div class="layui-headerbox">
			<!--嵌入layui框架的导航栏组件-->
			<!-- 框架的组件文档 "https://www.layui.com/doc/element/nav.html" -->
			<ul class="layui-nav" lay-filter="" style="min-height: 100%">
			  <li class="layui-nav-item"><a href="javascript:;">最新活动</a></li>
			  <li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
			  <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
			  <li class="layui-nav-item">
			    <a href="javascript:;">解决方案</a>
			    <dl class="layui-nav-child"> <!-- 二级菜单 -->
			      <dd><a href="">移动模块</a></dd>
			      <dd><a href="">后台模版</a></dd>
			      <dd><a href="">电商平台</a></dd>
			    </dl>
			  </li>
			  <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
			</ul>
			<!--layui框架的导航栏组件结束-->
		</div>


		<!-- 左侧内容区域 -->
		<div class="leftbox">
			

		</div>


		<!-- 右侧内容区域 -->
		<div class="rightbox">
			
			
		</div>
	</div>
	
	<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use('element', function(){
	  var element = layui.element;
	  
	  //…
	});

	//获取navitem项
	var navitem=$('.layui-nav .layui-nav-item');
	//为item执行点击事件
	navitem.click(function(){
		console.log($(this).index());
		//利用addClass()、removeClass()来控制当前点击项的样式。
		//siblings()可获取当前点击项的其他兄弟元素
		//$(this).addClass('layui-this')
		//$(this).siblings().removeClass('layui-this');
	});
	</script>
	<!-- layui / 导航栏布局 end-->
